<template>
  <div class="weekly-container">
    <el-card class="weekly-card">
      <template #header>
        <div class="card-header">
          <span>布布的周计划</span>
          <el-button type="primary" @click="addPlan">添加计划</el-button>
        </div>
      </template>
      
      <el-calendar v-model="currentDate">
        <template #dateCell="{ data }">
          <div class="calendar-cell">
            <p :class="{ 'is-today': isToday(data.day) }">
              {{ data.day.split('-').slice(2).join('') }}
            </p>
            <div class="plan-items">
              <el-tag 
                v-for="(plan, index) in getPlansForDate(data.day)"
                :key="index"
                :type="plan.type"
                size="small"
                class="plan-tag"
              >
                {{ plan.content }}
              </el-tag>
            </div>
          </div>
        </template>
      </el-calendar>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const currentDate = ref(new Date())

// 模拟周计划数据
const weeklyPlans = ref({
  '2024-03-11': [
    { content: '早教课', type: 'success' },
    { content: '游泳课', type: 'primary' }
  ],
  '2024-03-12': [
    { content: '音乐课', type: 'warning' }
  ],
  '2024-03-13': [
    { content: '绘画课', type: 'info' }
  ],
  '2024-03-14': [
    { content: '户外活动', type: 'success' }
  ]
})

const isToday = (day) => {
  const today = new Date()
  const compareDate = new Date(day)
  return today.toDateString() === compareDate.toDateString()
}

const getPlansForDate = (date) => {
  return weeklyPlans.value[date] || []
}

const addPlan = () => {
  // 添加新计划的逻辑
}
</script>

<style scoped>
.weekly-container {
  padding: 20px;
}

.weekly-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.calendar-cell {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.is-today {
  color: var(--el-color-primary);
  font-weight: bold;
}

.plan-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

.plan-tag {
  margin: 2px 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style> 